<template>
  <div class="footer">
    <section @click="skip('homepage')">
      <svg v-if="returnPageNow == 'homepage'">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#index.18edf5a"></use>
      </svg>
      <svg v-if="returnPageNow !== 'homepage'">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#index-regular.b245d60"></use>
      </svg>
      <p>外卖</p>
    </section>
    <section @click="skip('order')">
      <svg v-if="returnPageNow == 'order'">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#order.070ae2a"></use>
      </svg>
      <svg v-if="returnPageNow !== 'order'">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#order-regular.41c17f8"></use>
      </svg>
      <p>订单</p>
    </section>
    <section @click="skip('myzone')">
      <svg v-if="returnPageNow == 'myzone'">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#profile.dbc5ebf"></use>
      </svg>
      <svg v-if="returnPageNow !== 'myzone'">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#profile-regular.c151d62"></use>
      </svg>
      <p>我的</p>
    </section>
  </div>
</template>

<script>
  // import HeaderComponent from './components/header.vue'
  import { mapGetters } from 'vuex';
  export default{
    //父组件传入的数据
    props: {} ,
    //本地数据
    data(){
      return {
      }
    } ,
    //进入页面加载
    mounted () {

    },
    //方法
    methods: {
      skip: function (page){
        if(page !== "homepage" && !this.isLogin){
          this.$router.push({"name":"login"});
          return
        }
        this.$store.commit("setWhichPage", page);
        if (page === "homepage"){
        this.$router.push({"name":"index"});
        }else if(page === "order"){
        this.$router.push({"name":"nsit"});
        }else if(page === "myzone"){
        this.$router.push({"name":"user"});
        }
      }
    } ,

    //计算属性
    computed: {
      returnPageNow () {
        return this.$store.getters.getwhichpage;
      },
      isLogin () {
        return this.$store.getters.getIsLogin;
      }
    },
    //监控数据变化
    watch: {}

  }
</script>

<style lang="less" scoped>
  .footer {
    width: 100%;
    height: .35rem;
    display: flex;
    justify-content: space-between;
    position: fixed;
    bottom:0;
    left:0;
    font-size: .1rem;
    background-color: #fff;
    padding:.05rem;
  }
  .footer > section {
    width: 1rem;
    height: .35rem;
    text-align: center;
  }
  .footer > section > svg {
    width: .15rem;
    height: .15rem;
    margin-bottom: .05rem;
  }
</style>
